<template>
	<view>
		<ker-anchor :tabList="tabs" @current="changeCurrent">
			<scroll-view
			class="anchor-tabs-list" 
			scroll-y="true" 
			:scroll-with-animation="true"
			:scroll-into-view="toView"
			>
				<view class="anchor-content-item" :id="`item${index}`" v-for="(item,index) in tabs" :key="index">
					这是选项卡{{index+1}}
				</view>
			</scroll-view>
		</ker-anchor>
	</view>
</template>
<script>
import kerAnchor from '../../components/ker-anchor/ker-anchor.vue';
export default {
	data() {
		return {
			tabs:['选项卡1', '选项卡2', '选项卡3', '选项卡4', '选项卡5', '选项卡6', '选项卡7', '选项卡8', '选项卡9'],
			toView:null,
			scrollTop:0,
		};
	},
	components: {
		kerAnchor
	},
	methods: {
		changeCurrent(index){
			this.toView = `item${index}`
		},
	},
	mounted() {}
};
</script>
<style lang="scss" scoped>
	.anchor-content-item{
		height: 300px;
		background: #ccc;
		margin-bottom: 10px;
	}
	.anchor-tabs-list{
		position: fixed;
		top: 40px;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
